<template>
	<div class="product-list">
		<el-tabs v-model="activeName" class="demo-tabs"  @tab-change="handleClick">
			<el-tab-pane label="待发货" name="0"></el-tab-pane>
			<el-tab-pane label="已发货" name="10"></el-tab-pane>
		</el-tabs>

		<!--搜索表单-->
		<div class="common-seach-wrap">
			<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
				<!-- <el-form-item label="分销商名称">
					<el-input size="small" clearable v-model="searchForm.tuan_name"  placeholder="请输入分销商名称"></el-input>
				</el-form-item> -->

				<!-- <el-form-item>
					<el-button icon="Download" type="primary">导出分层表</el-button>
				</el-form-item> -->

				<el-form-item>
					<el-button icon="Download" type="primary" @click="onExportProduct">导出汇总表</el-button>
				</el-form-item>

				<el-form-item v-if="activeName == '0'">
					<el-button size="small" type="primary"  @click="getMultiFollowActualDistribution"
						>修改实际发货数量</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="product-content">
			<div class="table-wrap">
				<el-table ref="table" size="small" :data="tableData" border style="width: 100%" v-loading="loading"
					@selection-change="handleSelectionChange">
					>
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column type="index"  width="50" label="序号" align="center"  />
					<el-table-column prop="tuan_no" label="接龙编号" width="180" align="center"></el-table-column>
					<el-table-column label="接龙主图" width="160" align="center">
							<template #default="scope" >
								<div style="width: 100%;display: flex; justify-content:center;">
									<img style="display: block;  width:60px; height: 60px;" :src="scope.row.img" alt="">
								</div>
							</template>
						</el-table-column>
					<el-table-column prop="name" label="接龙名称" align="center"></el-table-column>

					<el-table-column fixed="right" label="操作" align="center" width="350">
						<template #default="scope" >
							<div>
								<el-button @click="goOrder(scope.row)" link type="primary" size="small"
									>查看订单</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!--分页-->
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
				:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
				:total="totalDataNumber"></el-pagination>
		</div>


		<el-drawer v-model="isShipmentShow" :with-header="false" :resizable="true" title="发货管理"  size="88%">
			<div class="drawer-view-head">
					<div class="drawer-view-title">发货管理</div>
					<el-button  type="primary" @click="sendPro">一键发货</el-button>
				</div>
			<div class="drawer-view">
				<div class="drawer-item" v-for="(i,index) in productList" :key="index" >
					<div class="drawer-item-head" >
						<div @click="i.isShow = !i.isShow" class="drawer-item-head-title"><el-icon style="margin-right: 10px;"  v-if="!i.isShow"><ArrowRightBold /></el-icon> <el-icon style="margin-right: 10px;"  v-if="i.isShow"><ArrowDownBold /></el-icon> 分销商 【{{i.name}}】待发货商品</div>
						<div><el-button icon="Download" type="primary" >汇总表 </el-button> <el-button icon="Download" type="primary" >分层表 </el-button> <el-button type="primary" @click="confirmSendProNum(i)">一键确认发货数量 </el-button></div>
					</div>

					<el-table  size="small" :data="i.products" border v-show="i.isShow">
						<el-table-column type="index"  width="50" label="序号" align="center"  />
						<el-table-column prop="product_no" label="商品SKU" width="160" align="center"></el-table-column>
						<el-table-column prop="product_name" label="商品名称" align="center"></el-table-column>
						<el-table-column label="商品主图" width="160" align="center">
							<template #default="scope" >
								<div style="width: 100%;display: flex; justify-content:center;">
									<img style="display: block;  width:60px; height: 60px;" :src="scope.row.image.file_path" alt="">
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="product_price" label="商品单价" width="100" align="center">
							<template #default="scope" >
								<span style="color:rgb(255, 51, 0);">A$ {{scope.row.product_price}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="total_num" label="下单数量" width="100" align="center">
							<template #default="scope" >
								<span>{{scope.row.total_num}}</span>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="实际发货数量" align="center" width="140">
							<template #default="scope" >
								<el-input size="small" clearable v-model="scope.row.send_num" @input="scope.row.send_num=scope.row.send_num.replace(/^(0+)|[^\d]+/g,'')"  placeholder="请输入实际发货数量"></el-input>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</el-drawer>

	</div>
</template>

<script>
import {
	waitingshipping,
	multiFollowActualDistribution,
	multiFollowActualDistributionSave,
} from "@/api/tuan.js";
import { useUserStore } from "@/store";
const { token } = useUserStore();
export default {
	components: {},
	data() {
		return {
			activeName: "0",

			position: 'left',
			// 发货管理是否显示
			isShipmentShow: false,
			/*是否正在加载*/
			loading: true,
			/*一页多少条*/
			pageSize: 10,
			/*一共多少条数据*/
			totalDataNumber: 0,
			/*当前是第几页*/
			curPage: 1,
			/*搜索参数*/
			searchForm: {
			},

			/*列表数据*/
			tableData: [],

			// 列表选中项
			selectedRows: [],

			// 接龙订单状态
			statusOptions: [
				{ label: "待发货", value: 40 },
                { label: "已发货", value: 10 },
                { label: "已签收", value: 20 },
            ],


			productList:[]
		};
	},
	created() {
		/*获取列表*/
		this.getList();
	},
	methods: {
		goOrder(e){
			this.$router.push({
				path: "/order/order/index",
				query: {
					tuan_no: e.tuan_no,
				},
			});
		},

		//一键确认发货数量
		confirmSendProNum(row){
			row.products.forEach(i=>{
				i.send_num = i.old_num
			})
		},


		// 一键发货
		sendPro(){
			for(let i = 0; i<this.productList.length;i++){
				if(this.productList[i].products.length>0){
					if(this.productList[i].products.some(item=>item.send_num == '')){
						let msg = `请确保${this.productList[i].name}分销商的实际发货数量填写完整`
						this.productList.map(i=>i.isShow = false)
						this.productList[i].isShow  = true
						ElMessage.error(msg);
						return
					}
				}
			}
			let products = []
			this.productList.forEach(i=>{

				if(i.products.length>0){
					let arr = []
					i.products.forEach(item=>{
						arr.push({
							product_no:item.product_no,
							product_ori_num: item.old_num,
							product_send_num: item.send_num
						})
					})
					let obj = {
						shop_supplier_id: i.shop_supplier_id,
						product_settings: arr
					}
					products.push(obj)
				}
			})

			let params = {
				tuan_ids:this.selectedRows.join(','),
				supplier_product_info: JSON.stringify(products) 
			}

			console.log(params)
			ElMessageBox.confirm('是否确认发货？', "提示", {
				type: "warning",
			}).then(() => {
				this.sendMultiFollowActualDistributionSave(params)
			});
		},

		
		// onExportProduct(row){
		// 	console.log(row)
		// 	let url = "/index.php/supplier/order.operate/exportTuanAllProduct";
		// 	let params = {
		// 		order_no:'',
		// 		style_id:'',
		// 		store_id:'',
		// 		create_time:'',
		// 		tuan_no: row.tuan_no,
		// 		dataType:'all',
		// 		token,
		// 	}
		// 	this.$filter.onExportFunc(url, params);
		// },
		

		/*切换菜单*/
		handleClick(tab, event) {
			this.curPage = 1,
			this.getList()
		},
		
		// 导出汇总表
		onExportProduct(){
			console.log()
			let url = "/api/supplier.follow/multiFollowOrderProductExport";
			let params = {
				tuan_no: this.selectedRows.join(','),
				dataType:'all',
				token,
			}
			this.$filter.onExportFunc(url, params);
		},

		openDrawer(){
			this.getMultiFollowActualDistribution()
		},

		closeDrawer(){
			this.activeName = '0'
			this.curPage = 1,
			this.getList()
			this.selectedRows = [ ]
			this.isShipmentShow = false
		},



		// 确认实际发货数量，一键发货
		async sendMultiFollowActualDistributionSave(params) {
			let data = await multiFollowActualDistributionSave(params);
			console.log(data)
			if (data.code == 1) {
				ElMessage.success('发货成功！');
				this.closeDrawer()
			} else {
				ElMessage.error(data.msg);
			}
		},


		// 获取修改实际发货量列表
		async getMultiFollowActualDistribution() {
			let params = {
				tuan_ids: this.selectedRows.join(',')
			}
			let data = await multiFollowActualDistribution(params);
			console.log(data)
			if (data.code == 1) {
				this.productList = data.data

				this.productList.forEach(i=>{
					i.isShow = false
					i.products.forEach(item=>{
						item.old_num = item.total_num
						item.send_num = ''
					})
				})
				this.productList[0].isShow = true
				this.isShipmentShow = true
			} else {
				ElMessage.error(data.msg);
			}
		},
		
		// 获取列表
		async getList() {
			let params = {
				...this.searchForm,
				distri_status: this.activeName,
				page: this.curPage,
				list_rows: this.pageSize
			}
			this.loading = true;
			let data = await waitingshipping(params);
			if (data.code == 1) {
				console.log(data.data.list)
				this.loading = false;
				this.tableData = data.data.list.data;
				this.totalDataNumber = data.data.list.total;
			} else {
				ElMessage.error(data.msg);
			}
		},


		/*选择第几页*/
		handleCurrentChange(val) {
			let self = this;
			self.loading = true;
			self.curPage = val;
			self.getList();
		},

		/*每页多少条*/
		handleSizeChange(val) {
			this.pageSize = val;
			this.getList();
		},


		handleSelectionChange(val){
			let arr = []
			val.map(i=>{arr.push(i.id)})
			this.selectedRows = arr
		}
	},
};
</script>

<style>
.head-part {
	display: flex;
	align-items: center;
}

.el-form-item--small .el-form-item__content {
    line-height: 1 !important;
}

.drawer-view{
	
}

.drawer-view-head {
	display: flex;
	align-items: center;
	height: 58px;
	border-bottom:1px solid #eee ;
}

.drawer-view-title {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
}

.drawer-item {
	/* padding-bottom: 20px;*/
	border-bottom: 1px solid #eee; 
}

.drawer-item-head {
	display: flex;
	align-items: center;
	height: 58px;

}

.drawer-item-head-title {
	flex:1;
	display: flex;
	align-items: center;
	height: 58px;
	font-size: 14px;
	cursor: pointer;
}

.drawer-footer {
	position: fixed;
	bottom: 10px;
	z-index: 9;
}


</style>
